<template id="Bar" :options="options">
  <div :id="id" :style="chartStyle">
    <slot></slot>
  </div>
</template>

<script>
/**
 *@author 张馨月
 */
    export default {
      name: "at-echart",
      data () {
        return {
          count:0,
          myChart:null,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        options(){
          this.draw()
        }
      },
      props:{
        id:{
          type: String,
          default: function () {
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
        options:{
          type:Object,
          default:function(){
            return {}
          }
        },
        chartStyle:{
          type:String,
          // required:true,
          default:"width:100%;height:100%;"
        }

      },
      methods: {
        draw(){
          if (document.getElementById(this.id)) {
            this.myChart = this.myChart === null ? this.$echarts.init(document.getElementById(this.id)) :this.myChart 
            this.myChart.setOption(this.options);
            var _this=this
            window.addEventListener("resize",function(){
                _this.myChart.resize();
            })
          }
        },
      }
    }
</script>

